<template>
	<!-- <bm-overlay pane="labelPane" :class="{sample2: true, active}" @draw="draw" @mouseover.native="active = true" @mouseleave.native="active = false">
		<div>我爱北京天安门</div>
	</bm-overlay> -->
	<bm-overlay ref="customOverlay" pane="labelPane" :class="{sample: true, active}" @draw="draw" @initialize='initialize'>
		<!-- <img class="nomal" src="@/assets/icon/dataScreen2/tq.png" mode='widthFix' alt="" /> -->
		<div v-if="false" @click="overClick">
			<img class="icon1" src="@/assets/icon/dataScreen2/1.png" mode='widthFix' alt="" />
			<img class="icon2" src="@/assets/icon/dataScreen2/2.png" mode='widthFix' alt="" />
			<div class="icon3">
				<img class="icon4" src="@/assets/icon/dataScreen2/3.png" mode='widthFix' alt="" />
				<div class="icon3t1">{{position.name}}</div>
				<div class="icon3t2">{{position.content}}</div>
			</div>
		</div>
		<div v-else @click="overClick" class="flex-column flex-alignCenter">
			<div class="icon3t3">{{position.name}}</div>
			<img class="nomal" v-if="position.type == 0" src="@/assets/icon/dataScreen/zc2.png" mode='widthFix' alt="" />
			<img class="nomal" v-if="position.type == 1" src="@/assets/icon/dataScreen/lx2.png" mode='widthFix' alt="" />
			<img class="nomal" v-if="position.type == 2" src="@/assets/icon/dataScreen/bj2.png" mode='widthFix' alt="" />
			
		</div>
	</bm-overlay>
</template>

<script>
export default {
	props: ['text', 'position', 'active'],
	watch: {
		position: {
			handler() {
				this.$refs.customOverlay.reload();
			},
			deep: true,
			active:false,
		},
	},
	methods: {
		overClick(e) {
			console.log('点击标记物', this.position);
			this.$emit('overClick', this.position);
		},
		handleClick() {
			global.alert('Well done.');
		},
		initialize() {
			console.log('覆盖物初始化时触发此事件');
		},
		draw({ el, BMap, map }) {
			// const pixel1 = map.pointToOverlayPixel(
			// 	new BMap.Point(106.445122, 29.822616)
			// );
			// el.style.left = pixel1.x - 60 + 'px';
			// el.style.top = pixel1.y - 20 + 'px';
			// return;
			const { lng, lat } = this.position;
			console.log('覆盖物更新', this.position,lng, lat );
			const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat));
			el.style.left = pixel.x - 60 + 'px';
			el.style.top = pixel.y - 20 + 'px';
		},
	},
};
</script>

<style>
.sample2 {
	width: 120px;
	height: 40px;
	line-height: 40px;
	background: rgba(0, 0, 0, 0.5);
	overflow: hidden;
	box-shadow: 0 0 5px #000;
	color: #fff;
	text-align: center;
	padding: 10px;
	position: absolute;
}
.sample2.active {
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
}
.nomal {
	width: 0.92rem;
	/* height: 1.59rem; */
}
.icon1 {
	width: 4.5rem;
	position: absolute;
	bottom: 0;
	left: 0rem;
}
.icon2 {
	width: 0.88rem;
	position: absolute;
	bottom: 1rem;
	left: 1.81rem;
}
.icon3 {
	width: 2rem;
	height: 1.12rem;
	position: absolute;
	bottom: 2.7rem;
	left: 1.25rem;
}
.icon4 {
	position: absolute;
	left: 0;
	right: 0;
	width: 2rem;
	height: 1.12rem;
}
.icon3t1 {
	font-size: 0.14rem;
	font-family: PingFang SC-Semibold, PingFang SC;
	font-weight: 600;
	color: #fada66;
	margin-bottom: 0.12rem;
	position: absolute;
	text-align: center;
	width: 90%;
	top: 0.2rem;
	left: 5%;
	/* left: 0.16rem; */
}
.icon3t2 {
	font-size: 0.12rem;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #ffffff;
	position: absolute;
	text-align: center;
	width: 90%;
	top: 0.4rem;
	left: 5%;
}
.icon3t3 {
	background: linear-gradient( 270deg, rgba(5,32,65,0) 0%, #052041 100%), rgba(249,249,249,0);
	font-size: 0.14rem;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #ffffff;
	display: inline-block;
	padding: 0.1rem;
	
}
.sample {
	color: #fff;
	text-align: center;
	padding: 10px;
	position: absolute;
	width: 5rem;
	height: 4rem;
}
.sample.active {
	background: rgba(0, 0, 0, 0.25);
	color: #fff;
}
</style>